<template>
	<view class="autograph">
		<view class="header">
			<view>手签确认</view>
			<view class="close"></view>
		</view>
		<!-- 手写签名 -->
		<canvas style="width: 300px; height: 300px;" id="canvas" canvas-id="canvas" @touchstart="start" @touchend="end"
			@touchmove="move"></canvas>
		<view>

			<button class="sucess" @tap.stop="sucess">确定</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref, getCurrentInstance } from "vue"
	// 不是响应式的变量了
	let ctx = null;
	// 是否正在画
	let isDrawing = ref(false)
	// 路径点集合	
	let points = reactive([])
	// onMounted函数中获取canvas的绘图工具(上下文工具)
	onMounted(() => {
		// getCurrentInstance().appContext
		ctx = uni.createCanvasContext("canvas")
		//设置画笔样式
		ctx.lineWidth = 3;
		ctx.lineCap = "round"
		ctx.lineJoin = "round"
		ctx.fillStyle = "white"
		// ctx.fillRect(0, 0, res.windowWidth, res.windowHeight)
		console.log(ctx)
	})

	// 开始写签名
	let start = (e: any) => {
		isDrawing.value = true
		// 先初始化坐标
		let { x, y } = e?.touches[0]
		// 开始存点
		points.push({ x, y })
		console.log("开始了吧")
		// 每次都开启新的路径
		ctx.beginPath()
	}

	let move = (e: any) => {
		e.preventDefault()
		// 获取移动时的坐标
		let { x, y } = e?.touches[0]
		// 存点
		points.push({ x, y })

		// 开始画图
		// 1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
		// 2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
		// 3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
		if (points.length > 2) {
			let { x, y } = points[0]
			let { x: x1, y: y1 } = points[1]

			points.shift()
			ctx.moveTo(x, y)
			ctx.lineTo(x1, y1)

			ctx.stroke()
			ctx.draw(true)
		}

	}

	// 结束写签名
	let end = () => {
		// 将所有的点清空
		points.length
		// 停止绘制
		isDrawing.value = false
	}

	// 保存
	let sucess = () => {

	}

	// 清除
	let reset = () => {

	}
</script>

<style lang="scss" scoped>
	.autograph {
		position: absolute;
		z-index: 100;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
